<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/public.css" rel="stylesheet" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.face-img {
				margin-top: 44px;
				min-height: 177px;
				width: 100%;
				background: #FFF;
			}
			
			.face-img img {
				min-height: 177px;
				width: 100%;
			}
			
			.add-shopcat {
				position: fixed;
				display: flex;
				align-items: center;
				left: 0;
				bottom: 0;
				height: 63px;
				width: 100%;
				padding: 0 8px;
				background: #FFF;
			}
			
			.add-shopcat-icon {
				margin-top: 6px;
				width: 80px;
				height: 48px;
			}
			
			.shopcat-t,
			.shopcat-b {
				display: flex;
				justify-content: center;
				height: 24px;
				line-height: 24px;
				width: 80px;
				color: #3C4A55;
			}
			
			.add-study-btn {
				height: 48px;
				width: 100%;
				border-radius: 48px;
				background: #FF632A;
			}
			
			.mui-btn-danger.mui-active:enabled,
			.mui-btn-danger:enabled:active,
			.mui-btn-negative.mui-active:enabled,
			.mui-btn-negative:enabled:active,
			.mui-btn-red.mui-active:enabled,
			.mui-btn-red:enabled:active {
				background: #FF632A;
			}
			/**
			 * 选项卡
			 */
			
			.tab-items-3 .tab-div {
				display: flex;
				height: 46px;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				background: #FFF;
			}
			
			.tab-div-active {
				color: #2cc17b;
				border-bottom: #2cc17b 1px solid;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" id="app">
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：头部
            -->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" v-text="title"></h1>
			</header>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：封面图
            -->
			<div id="face-img" class="face-img">
				<img src="https://edu-image.nosdn.127.net/43e27d1e-021c-49e5-a7da-bae92cefb786.jpg?imageView&quality=100&crop=0_0_879_495&thumbnail=450y250" alt="" />
			</div>

			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：简介 目录 评价选项卡
            -->
			<div class="tab-items-3 mui-row">
				<div v-for="(item,index) in tab" :key="index" @click="tabsSwitch(index)" class="tab-div mui-col-xs-4" :class="{ 'tab-div-active':item.active }" v-text="item.name"></div>
			</div>

			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：底部加入购物车
            -->
			<div class="add-shopcat mui-row">
				<div class="mui-col-xs-3">
					<div class="add-shopcat-icon">
						<div class="shopcat-t">
							<img src="../../img/shopcat.png" />
						</div>
						<div class="shopcat-b">
							加入购物车
						</div>
					</div>
				</div>
				<div class="mui-col-xs-9">
					<div class="add-study">
						<button type="button" class="mui-btn mui-btn-danger add-study-btn">加入学习</button>
					</div>
				</div>

			</div>
		</div>

		</div>
		<!--引入公用脚本文件开始-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引入公用脚本文件结束-->

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					title: '',
					//选项卡
					tab: [{
							name: '简介',
							active: true
						},
						{
							name: '目录',
							active: false
						},
						{
							name: '评价',
							active: false
						}
					]
				},
				created: function() {
					this.title = tools.getUrlParam("param");
				},
				mounted: function() {
					//等plus准备好在创建子页面比较好
					mui.plusReady(function() {
						var top = $("#face-img").height() + 44 + 46;
						mui.init({
							//创建3个选项卡子页面
							subpages: [{
								url: "detail_tab3.html", //子页面HTML地址，支持本地地址和网络地址
								id: "detail_tab3.html", //子页面标志
								styles: {
									top: top + "px", //子页面顶部位置
									bottom: "63px" //子页面底部位置
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...' //等待对话框上显示的提示内容
								}
							}, {
								url: "detail_tab2.html", //子页面HTML地址，支持本地地址和网络地址
								id: "detail_tab2.html", //子页面标志
								styles: {
									top: top + "px", //子页面顶部位置
									bottom: "63px" //子页面底部位置
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...' //等待对话框上显示的提示内容
								}
							}, {
								url: "detail_tab1.html", //子页面HTML地址，支持本地地址和网络地址
								id: "detail_tab1.html", //子页面标志
								styles: {
									top: top + "px", //子页面顶部位置
									bottom: "63px" //子页面底部位置
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...' //等待对话框上显示的提示内容
								}
							}]
						});
					});
				},
				methods: {
					tabsSwitch: function(index) {
						for(var i = 0; i < this.tab.length; i++) {
							this.tab[i].active = false;
							if(i == index) {
								this.tab[i].active = true;
								var n = i + 1;
								if(mui.os.plus) {
									plus.webview.show("detail_tab" + n + ".html");
								} else {
									tools.openPage("detail_tab" + n + ".html", "detail_tab" + n + ".html")
								}
							}
						}
					}
				}

			});
		</script>
	</body>

</html>